﻿/// <reference path="kinetic-v3.9.3.js" />


$(document).ready(function () {
    var defaultLoanTerm = 30;
    var defaultLoanAmount = 300000;
    $($('.sliderInput')[0]).sliderInput({
        max: 800000, defaultVal: defaultLoanAmount,
        valueChanged: function (val) {
            myDrawer.setData({ loanTerm: defaultLoanTerm, amount: val });
        }
    });
    $($('.sliderInput')[1]).sliderInput({ max: 100 });
    $($('.sliderInput')[2]).sliderInput({
        max: 50, defaultVal: defaultLoanTerm,
        valueChanged: function (val) {
            myDrawer.setData({ loanTerm: val, amount: defaultLoanAmount });
        }
    });

    var myDrawer = new MontageDrawer({ canvasTag: 'drawer' });

    //myDrawer.draw();
    myDrawer.setData({ loanTerm: defaultLoanTerm, amount: defaultLoanAmount });

});


$.fn.sliderInput = function (opts) {
    var max = opts == undefined || opts.max == undefined ? 100 : opts.max;
    var defaultVal = opts == undefined || opts.defaultVal == undefined ? 0 : opts.defaultVal;
    this.each(function () {
        var $this = $(this);
        $this.find('.paramSlider').slider(
        {
            slide: function (event, ui) {
                $this.find('input').val($(this).slider('value'));
                raiseValueChanged();
            },
            max: max
        });

        $this.find('input').change(function () {
            $this.find('.paramSlider').slider('value', parseInt($(this).val()));
            raiseValueChanged();
        });

        $this.find('input').val(defaultVal);
        $this.find('.paramSlider').slider('value', defaultVal);

        function raiseValueChanged() {
            if (opts.valueChanged != undefined)
                opts.valueChanged($this.find('.paramSlider').slider('value'));
        }
    });
};



MontageDrawer = function (options) {
    var stage = new Kinetic.Stage({
        container: options.canvasTag,
        width: 405,
        height: 230
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);
    var layerCanvas = $(layer.canvas);

    var p1 = 100;
    var p2 = 10;
    var p3 = 50;
    var rect = {
        x1: p1, y1: p2,
        x2: layerCanvas.width() - p2, y2: p2,
        x3: layerCanvas.width() - p2, y3: layerCanvas.height() - p3,
        x4: p1, y4: layerCanvas.height() - p3
    };


    initDrawer();

    function initDrawer() {
        var text = new Kinetic.Text({
            x: 10,
            y: 10,
            text: 'Mortgage',
            fontSize: 10,
            fontFamily: "Tahoma",
            fontStyle: 'bold',
            textFill: "gray",
            align: "left",
            verticalAlign: "middle"
        });
        layer.add(text);

        text = new Kinetic.Text({
            x: layerCanvas.width() / 2,
            y: layerCanvas.height() - 20,
            text: 'Years',
            fontSize: 10,
            fontFamily: "Tahoma",
            fontStyle: 'normal',
            textFill: "gray",
            align: "center"
        });
        layer.add(text);

        text = new Kinetic.Text({
            x: 10,
            y: layerCanvas.height() / 2,
            text: 'Amount',
            fontSize: 10,
            fontFamily: "Tahoma",
            fontStyle: 'normal',
            textFill: "gray",
            align: "center",
            verticalAlign: "middle",
            rotation: -Math.PI / 2
        });
        layer.add(text);

        makeUiTotal();
    }




    function makeUiTotal() {
        var pathData = sp(rect.x1, rect.y1, 'M') + sp(rect.x3, rect.y3) + sp(rect.x4, rect.y4) + "Z";

        var path = new Kinetic.Path({
            x: 0,
            y: 0,
            data: pathData,
            fill: "gray"
        });

        layer.add(path);
        path.setZIndex(1);
    }



    this.draw = function () {
        layer.draw();
    };

    var yMax = 600000;
    this.setData = function (data) {
        mortgageData = data;
        makeUiAxis({ xMax: data.loanTerm, yMax: yMax });
        makeUiPrincipal();

        layer.draw();
    };

    var mortgageData = undefined;

    var principalPath = new Kinetic.Path({
        x: 0,
        y: 0,
        data: undefined,
        fill: "#9ECD57"
    });
    function makeUiPrincipal() {
        var pathData = sp(rect.x1, rect.y3 - (rect.y3 - rect.y1) / yMax * mortgageData.amount, 'M')
            + sp(rect.x1 + 30, rect.y1 + 40)
            + sp(rect.x1 + 60, rect.y1 + 40)


            + sp(rect.x3, rect.y3)
            + sp(rect.x4, rect.y4)
            + "Z";

        principalPath.setData(pathData);

        if (!layer.children.contains(principalPath)) {
            layer.add(principalPath);
            principalPath.setZIndex(3);
        }
    }

    function sp(x, y, t) {
        if (t == undefined)
            t = 'L';
        return t + x + ',' + y;
    }

    var axisGroup = new Kinetic.Group();
    function makeUiAxis(paras) {

        var xStepVal = Math.round(paras.xMax / 4);
        var yStepVal = Math.round(paras.yMax / 4);
        var xStep = Math.round((rect.x2 - rect.x1) / 4);
        var yStep = Math.round((rect.y3 - rect.y1) / 4);

        if (!layer.children.contains(axisGroup)) {
            layer.add(axisGroup);
            axisGroup.setZIndex(0);
        }
        axisGroup.removeChildren();

        // draw x
        var x = rect.x1;
        var xVal = 0;
        while (x < rect.x2) {
            var line = new Kinetic.Line({
                points: [x, rect.y4, x, rect.y1],
                stroke: "#E8E8E8",
                strokeWidth: 1
            });
            var sline = new Kinetic.Line({
                points: [x, rect.y4, x, rect.y4 + 5],
                stroke: "black",
                strokeWidth: 1,
                width: 20
            });

            var pText = new Kinetic.Text({
                x: x - 50,
                y: rect.y4 + 10,
                text: xVal.toString(),
                fontSize: 10,
                fontFamily: "Tahoma",
                fontStyle: 'normal',
                textFill: "gray",
                align: "center",
                width: 100
            });
            //pText.attrs.x = x - pText.getBoxWidth() / 2;

            if (x == rect.x1) {
                line.attrs.stroke = 'black';
            }
            x += xStep;
            xVal += xStepVal;
            axisGroup.add(line);
            axisGroup.add(sline);
            axisGroup.add(pText);
        }

        // draw y
        var y = rect.y4;
        var yVal = 0;
        while (y > rect.y1) {
            var line = new Kinetic.Line({
                points: [rect.x1, y, rect.x2, y],
                stroke: "#E8E8E8",
                strokeWidth: 1
            });
            var sline = new Kinetic.Line({
                points: [rect.x1, y, rect.x1 - 5, y],
                stroke: "black",
                strokeWidth: 1
            });

            var pText = new Kinetic.Text({
                x: rect.x1 - 100 - 10,
                y: y,
                text: '$' + (yVal / 1000).toString() + 'k',
                fontSize: 10,
                fontFamily: "Tahoma",
                fontStyle: 'normal',
                textFill: "gray",
                align: "right",
                width: 100
            });
            pText.attrs.y = y - pText.getBoxHeight() / 2;


            if (y == rect.y4) {
                line.attrs.stroke = 'black';
            }
            y -= yStep;
            yVal += yStepVal;
            axisGroup.add(line);
            axisGroup.add(sline);
            axisGroup.add(pText);
        }
    }
};


// LOGIC

function calculatePayment() {

}